import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { SearchOutline } from 'antd-mobile-icons';
import styles from './index.module.css';
import Nabar from '../../conpoment/Nabar';
import tup from './img/image.png';

function Index() {
  const navigate = useNavigate();
  const [searchTerm, setSearchTerm] = useState('');
  const [activeTab, setActiveTab] = useState('general');
  const [selectedDepartment, setSelectedDepartment] = useState('全科门诊');
  
  // 医院信息
  const hospitalInfo = {
    name: '四川省保健院南苑',
    address: '四川省成都市锦江区画溪路666号',
    icon: tup
  };

  // 科室分类数据
  const departmentCategories = [
    { id: 'surgery', name: '外科', departments: ['中医外科门诊', '门诊外一科', '门诊外二科', '门诊外三科','门诊外四科','神经外科'] },
    { id: 'internal', name: '内科', departments:['消化内科', '内分泌科', '肾脏内科', '心血管内科']},
    { id: 'general', name: '全科门诊', departments: ['全一科门诊', '全二科门诊', '全三科门诊', '全四科门诊'] },
    { id: 'dental', name: '口腔科', departments: [] },
    { id: 'ent', name: '耳鼻喉科', departments: [] },
    { id: 'dermatology', name: '皮肤科', departments: [] },
    { id: 'obstetrics', name: '妇产科', departments: [] },
    { id: 'orthopedics', name: '骨科', departments: [] },
    { id: 'pediatrics', name: '儿科', departments: [] }
  ];

  // 当前选中分类的科室列表
  const currentDepartments = departmentCategories.find(cat => cat.id === activeTab)?.departments || [];
  const handleCampusSwitch = () => {
    navigate('/appointment_from');
  };
  const handleConsult = () => {
    console.log('咨询智能客服');
  };

  const handleDepartmentSelect = (departmentName: string) => {
    setSelectedDepartment(departmentName);
    console.log('选择科室:', departmentName);
    // 跳转到医生列表页面
    navigate('/doctor_list');
  };
  return (
    <div className={styles.container}>
      <Nabar title='科室列表' sticky={false} />
      <div className={styles.content}>
        {/* 医院信息区域 */}
        <div className={styles.hospitalInfo}>
          <div className={styles.hospitalIcon}>
            <img src={hospitalInfo.icon} alt="医院图标" />
          </div>
          <div className={styles.hospitalDetails}>
            <h3 className={styles.hospitalName}>{hospitalInfo.name}</h3>
            <p className={styles.hospitalAddress}>{hospitalInfo.address}</p>
          </div>
          <button className={styles.switchButton} onClick={handleCampusSwitch}>
            切换院区 &gt;
          </button>
        </div>
        {/* 智能客服横幅 */}
        <div className={styles.smartServiceBanner}>
          <div className={styles.bannerContent}>
            <span className={styles.bannerText}>不知道挂什么科,问问智能客服?</span>
            <button className={styles.consultButton} onClick={handleConsult}>
              去咨询
            </button>
          </div>
        </div>
        {/* 搜索栏 */}
        <div className={styles.searchBar}>
          <SearchOutline className={styles.searchIcon} />
          <input
            type="text"
            placeholder="可输入科室名称检索"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className={styles.searchInput}
          />
        </div>

        {/* 科室选择两列布局 */}
        <div className={styles.departmentContainer}>
          {/* 左侧科室分类 */}
          <div className={styles.categoryList}>
            {departmentCategories.map((category) => (
              <div
                key={category.id}
                className={`${styles.categoryItem} ${activeTab === category.id ? styles.activeCategory : ''}`}
                onClick={() => setActiveTab(category.id)}
              >
                {category.name}
              </div>
            ))}
          </div>

          {/* 右侧门诊列表 */}
          <div className={styles.clinicList}>
            {currentDepartments.length > 0 ? (
              currentDepartments.map((clinic, index) => (
                <div 
                  key={index}
                  className={`${styles.clinicItem} ${selectedDepartment === clinic ? styles.selectedClinic : ''}`}
                  onClick={() => handleDepartmentSelect(clinic)}
                >
                  {clinic}
                </div>
              ))
            ) : (
              <div className={styles.noClinicMessage}>暂无门诊信息</div>
            )}
          </div>
        </div>
      </div>



      
    </div>
  )
}
export default Index